﻿body {background-color:#f1f1f1;font-family:'Microsoft YaHei';}
.h50 { height:50px;}
.mbdesign {margin-top:52px;position:relative;display:block;width:100%;}
.design_top {z-index:3;}
.modal-body {padding-top:0px;}
/*general*/
.mbdesign .left {width:360px;position:fixed;left:0px; overflow:hidden;  background-color:#fff;
                  background-color:#fff;box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 5px 0px, rgba(0, 0, 0, 0.0784314) 0px 2px 10px 0px;min-height:80vh;}
.mbdesign .right {width:240px;position:fixed;right:0px;top:52px;overflow:hidden; 
                  background-color:#fff;box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 5px 0px, rgba(0, 0, 0, 0.0784314) 0px 2px 10px 0px;min-height:80vh;}
.mbdesign .mainpane {}
.mainpane .mobile {margin:0 auto;width:700px; position:relative;padding-left:100px;background:url(/App_Themes/User/bg_scence.png) no-repeat;width:400px;height:850px;padding-left:25px;padding-top:120px;}
.mainpane .mobile #design_ifr {border: none; width: 640px; height: 1040px; background-color: #fff; overflow: hidden;transform: scale(0.5);position:absolute;top:-90px; left:-129px;}
/*左边框*/
.mbdesign .left_footer {height:55px;text-align:center;border-top:1px solid #ddd;position:absolute;bottom:0px;width:100%;}
.mbdesign .left_footer .foot_btn {display:inline-block;color:#19A6FF;border-radius:50%;border:1px solid #fff;width:40px;height:40px;margin-top:10px;padding-top:8px;cursor:pointer;}
.mbdesign .left_footer .foot_btn:hover {border:1px solid #19A6FF;background-color:#08a1ef;color:#fff;}
/*手机左右边栏*/
.mobile .sidebar {width:42px;position:absolute;left:374px; top:140px;}
.mobile .sidebar>a {color:#fff;text-decoration:none;background:rgba(0,0,0,.5);width:40px;height:40px;display:inline-block;text-align:center;padding-top:10px;font-size:15px;}
.mobile .sidebar>a.border {margin-top:1px;}
.mobile .sidebar>a:hover {background:rgba(0,0,0,.9);}
.side_menu {position:absolute;background-color:rgba(0, 0, 0, 0.7);right:43px;margin-top:-37px; width:94px;border:1px solid #000;}
.side_menu .item {display:block;text-decoration:none;color:#fff;height:30px; padding:5px 15px;text-align:right;}
.side_menu .item:hover {background-color:#578ec7;}
.side_menu .item i {float:left;}
.side_menu .item span {position:relative;display:inline-block;top:-2px; }
/*右边框*/
.rpane .menuul li{float:left;background-color:#578ec7;color:#fff;cursor:pointer;width:120px;outline:1px solid #79a2ce;text-align:center;height:40px;line-height:40px;border-right:1px solid #fff;}
.rpane .menuul li:hover {background:#709fcf;}
.rpane .menuul li.active {color:#578ec7;background:#fff;outline:1px solid #fff;}
.rpane .tab_head {padding:8px 10px 5px 15px; border-bottom:1px solid #ddd;}
.rpane .tab_menu_ul li{float:left;text-align:center;margin-bottom:-1px; width:70px;height:35px;cursor:pointer;border-bottom:3px solid rgba(0, 0, 0, 0.00);}
.rpane .tab_menu_ul li:hover {color:#19A6FF;}
.rpane .tab_menu_ul li.active {border-bottom:3px solid #19A6FF;}
.rpane .tab_content {height:664px;overflow-x:hidden;overflow-y:auto;}
.rpane .tab_content .mbtlp_ul li{float:left;width:85px;height:128px;border:1px solid #ddd; margin:10px 14px 15px 15px;text-align:center;}
.rpane .tab_content .mbtlp_ul img {max-width:83px;max-height:128px;cursor:pointer;}
.rpane #page_ul li {height:70px;width:100%;background-color:#fff!important;color:#76838f; border:1px solid #ccd5db;margin:5px;font-size:12px;position:relative;}
.rpane #page_ul .page_num {border-top:35px solid #76838f;border-right:35px solid transparent;float:left;width:0;height:0;}
.rpane #page_ul li.active .page_num{border-top:35px solid #08a1ef;}
.rpane #page_ul .page_num span {position:absolute;top:3px;color:#fff;display:block;width:20px;text-align:center;}
.rpane #page_ul .page_name {width:100px;display:inline-block;margin-left:20px;margin-top:20px;}
.rpane #page_ul .page_handler {position:absolute;top:0px;right:0px;width:35px;height:30px;text-align:center;background-color:#19A6FF;cursor:move;padding-top:10px;}
.rpane #page_ul .page_handler i {color:#fff;}
/*editor通用*/
.editor .candrag,.onlydrag,.onlyresize,.dragy {cursor:move;display:inline-block; max-width:100%;}
/*.editor .candrag.active,.onlydrag.active,.onlyresize.active,.dragy.active {}*/
.ui-resizable-handle {display:none;visibility:hidden;}
.active .ui-resizable-handle {display:block;visibility:visible;}
.editor .ui-resizable-n,.ui-resizable-e,.ui-resizable-s,.ui-resizable-w {background-color:#19A6FF;}
/*菜单*/
.editor .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {background:#0081c2;color:#fff;}
/*对部分设计元素,样式处理*/
.editor .btn_icon_circular {padding-top:0px;}
.editor .diy_drag_div {margin:20px;}
.editor .diy_ifr {border:none;overflow:hidden;}
/*拖动时*/
.drag_alignLine { position: absolute;display: none;z-index:9999;}
.designLine {position:fixed;height:100%;background-color:#fff;border-right:2px dashed #000;z-index:10;}
#compinfo_div {height:20px;line-height:20px; background-color:rgba(8, 0, 0, 0.76);color:#fff;border-radius:10px;padding:0 8px;transform:scale(2);}
#diy-rotate {width: 60px; height:60px;border:none;position:absolute;z-index:998;left: 40%;top:-70px;display:none;}
#diy-rotate .bar-line {width:3px;height:60px;position:absolute;left:50%;background-color:#44cb83;top:9px;}
#diy-rotate .bar_rotate {position:absolute;left:23px;}
.bar.bar-radius {border-radius:50%;width:20px;height:20px;display:block;cursor:url(/design/res/img/mouserotate.ico) 10 10,default;}
.bar.bar-s1 {border:1px solid #08a1ef;background-color:#fff;}
.bar.bar-s2 {background-color:#44cb83;}
/*--------------------*/
#mask_div {background-color: rgba(0,0,0,0.6);z-index: 400;overflow: hidden;position: fixed;top: 0;left: 0;bottom: 0;right: 0;padding: 0;display: none;}
#mask_wait_div {background-color:rgba(0,0,0,0.6);position:fixed;top:40%;left:40%;padding:30px;border-radius:5px;display:none;z-index:1001;}
.rotateElement-btn, .dragElement-btn {transform:scale(2)}
.editor {width:640px;height:1040px;margin:0 auto;overflow:hidden;}

.header {position:fixed;top:10px;z-index:998;}
.header.back {left:10px;font-size:38px;padding-top:6px;}
.header.view {right:10px;font-size:20px;padding-top:20px;}
.link_btn {background-color:rgba(255,255,255,0.9);border-radius:50%;box-shadow:-2px 0 5px #ddd;width:70px;height:70px;text-align:center;border:2px solid #ddd;}
.link_btn.disabled i {color:#ccc;}
    
.footer {position:fixed;bottom:0px;left:0px;width:100%; box-shadow:0 0 5px #ccc;background-color:#fff;border-top:2px solid #ccc;z-index:300;text-align:center;}
.footer > a {width:124px;display:inline-block;text-align:center;height:100px;}
.footer > a i {display:block;font-size:4em;color:#a5a3a3;}
.footer > a span {display:block;font-size:1.8em;padding-top:5px;}
.footer .add {position:absolute;border-radius:50%;background-color:#19A6FF;border:3px solid #1a97e6;color:#fff;width:130px;height:130px;padding-top:30px;top:-30px;}
.footer .add i {font-size:5em;color:#fff;}
.footcmd {z-index:401;position:fixed;bottom:0px;background-color:#fff;display:none;width:100%;padding-top:3px;background-color:#fff;}

.footcmd.addcomp {height:140px;padding-top:20px;}
.footcmd.addcomp a {width:155px;display:inline-block;text-align:center;}
.footcmd.addcomp a i {display:block;font-size:4em;color:#19A6FF;}
.footcmd.addcomp a span {display:block;font-size:1.8em;padding-top:5px;}

.footcmd_head {background-color:rgba(244,244,244, 0.7);border:1px solid #D8D8D8;border-left:none;border-right:none;width:100%;height:80px;}
.footcmd_head .head_tab_wrap {width:80%;display:inline-block;height:40px;padding:5px 10px;}
.footcmd_head .head_tab_wrap .opbtn {width:auto;min-width:110px; height:60px;font-size:30px;}
.footcmd_head .head_yes {width:18%;display:inline-block;height:40px;text-align:right;}
.footcmd_head .head_yes .btn i {font-size:3em;}

.footcmd_ul_wrap {width:auto;overflow-y:hidden;overflow-x:auto;}
.footcmd_ul {white-space:nowrap;margin:0;padding:0;}
.footcmd_ul li {width:128px;height:208px;margin-right:20px;position:relative;list-style:none;display:inline-block;margin:4px 10px 0;padding-top:5px;margin-bottom:23px;}
.footcmd_ul li.active {}
.footcmd_ul li img{border:3px solid #e3e3e3;}
.footcmd_ul li.active img{border:3px solid #19A6FF;}
.footcmd_ul li.active .con{border:3px solid #19A6FF;}
.footcmd_ul .img {width:128px;height:206px;vertical-align:initial;}
.footcmd_ul .txt {position:absolute;bottom:0px;background-color:#ccc;color:#000;width:100%;text-align:center;padding:5px 0;font-size:1.5em;overflow:hidden;}
.footcmd_ul .del{position:absolute;bottom:-20px;width:100%;text-align:center;}
.footcmd_ul .del .d_btn{width:40px;height:40px;background-color:red;border-radius:50%;margin:0 auto;}
.footcmd_ul .del .d_btn i{font-size: 30px;color: #fff;line-height: 40px;}
.footcmd_ul .eletxt{top:0;bottom:auto;}
.footcmd_ul .con{width:128px;height:206px;background-color:#e3e3e3;padding-top:30px;}
.footcmd_ul .con span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;width:90%; height:100%;padding:10px;font-size:1.6em;}
.footcmd_ul .hid {display:none;}
.footcmd_ul .active .hid {display:block;}
.footcmd_ul .active .txt {background-color:#19A6FF;color:#fff;}
/*全屏弹出层*/
#pop_div {position:fixed;width:100%;height:100%;z-index:3000;display:none;top:0px;left:0px;}/*用于遮盖其他元素*/
#pop_div .popdiag {z-index:1001;width:100%;height:100%; padding:0;display:none; -webkit-overflow-scrolling: touch;overflow-y: scroll;background-color:#fff; }/*兼容iPhone滚动*/
#pop_div .popdiag .popifr {border: none;width:100%;height:100%;display:none;}
#txt_div {position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; background-color: #fff; display: none;border-bottom:1px solid #ddd;}
#txt_div textarea {width: 100%; height: 150px; resize: none; border: none; padding: 5px 8px;font-size:30px;}
#txt_div .footwrap {text-align: right; border-top: 2px solid #ddd; padding: 5px 200px;}
/*-------------------*/
.dragel{position:absolute;outline:2px solid #0290e2;z-index:398}
.dragel_inner{width:100%;height:100%}
.dragElement-btn{width:40px;height:40px;border-radius:30px;position:absolute;bottom:-11px;right:-11px}
.dragElement-btn:before{content:'';display:block;width:25px;height:25px;border-radius:20px;position:absolute;bottom:8px;right:8px;background:url(/Design/res/img/drag.png);background-color:#00A0E9;background-repeat:no-repeat;-webkit-background-size:auto 26px;background-size:auto 26px;background-position:-32px -1px}
.rotateElement-btn{width:40px;height:40px;border-radius:30px;position:absolute;top:-11px;right:-11px}
.rotateElement-btn:before{content:'';display:block;width:25px;height:25px;border-radius:20px;position:absolute;top:8px;right:8px;background:url(/Design/res/img/drag.png);background-color:#00A0E9;background-repeat:no-repeat;-webkit-background-size:auto 26px;background-size:auto 26px;background-position:-62px -2px}
.curchange .dragElement-btn,.curchange .rotateElement-btn{display:block}
/*左边按钮弹出菜单*/
#titmenu{position: absolute;overflow: hidden;font-size:20px;}
.menu_vertical{height:0px;top: 80px;opacity: 0;transition: height .4s ease, opacity .4s ease;-webkit-transition: height .4s ease, opacity .4s ease;}
.menu_active{opacity: 1; height:250px;}
#titmenu .item{line-height:35px;margin:5px 0 10px 0;color:#28C4FD;}